<template>
  <div style="width:100%">
    <div class="notetitle">
      <span class="major">便签&nbsp;</span>
      <span class="info">/ 添加编辑便签</span>
    </div>
    <div class="content-box">
      <el-form :model="formInline" label-width="100px" :inline="true">
        <el-form-item label="关联项目">
          <el-select v-model="formInline.projectId">
            <el-option v-for="dict in projectList" :key="dict.guid" :label="dict.name" :value="dict.guid" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联业务">
          <el-select v-model="formInline.businessId">
            <el-option v-for="dict in businessList" :key="dict.guid" :label="dict.name" :value="dict.guid" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联干系人">
          <el-select v-model="formInline.stakeholderId">
            <el-option v-for="dict in stakeholderList" :key="dict.guid" :label="dict.name" :value="dict.guid" />
          </el-select>
        </el-form-item>
      </el-form>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item>
          <el-tag>
            <i class="el-icon-warning"/> 请先选择项目关联后，再选择关联业务和关联干系人
          </el-tag>
        </el-form-item>
        <el-form-item label="便签内容">
          <el-input v-model="form.note" type="textarea" :rows="4"/>
        </el-form-item>
        <el-form-item label="便签附件">
          <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple :file-list="form.fileList">
            <div class="el-upload__text">
              <em>
                <svg-icon icon-class="upload2" class="uploadicon" />点击上传或拖拽文件到此上传
              </em>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="notebutton">
        <el-button @click="cancelNote">取消</el-button>
        <el-button type="primary" @click="sumbitNote">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getProjectList,
  getBusinessList,
  getStakeholderList,
  updateNote
} from '@/api/note';
export default {
  name: 'NoteInfo',
  data() {
    return {
      projectList: [],
      businessList: [],
      stakeholderList: [],
      formInline: {
        user: '',
        bid: '',
        project: ''
      },
      form: {
        note: '',
        fileList: [
          {
            name: 'food.jpeg',
            url:
              'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg',
            url:
              'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          }
        ]
      }
    }
  },
  mounted() {
    this.formInline = {
      user: 'shanghai',
      bid: 'shanghai',
      project: 'shanghai'
    }
  },
  created() {
    getProjectList().then(res => {
      this.projectList = res.data
    })
    getBusinessList().then(res => {
      this.businessList = res.data
    })
    getStakeholderList().then(res => {
      this.stakeholderList = res.data
    })
  },
  methods: {
    sumbitNote() {
      this.$router.back(-1)
    },
    cancelNote() {
      this.$router.back(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
.notetitle {
  height: 64px;
  display: flex;
  align-items: center;
  margin: 0 32px;
  padding: 14px 0;
  border-bottom: 1px solid #dfe6ec;
  font-size: 16px;
  letter-spacing: 0;
  .major {
    font-family: Microsoft YaHei;
    color: rgba(0, 0, 0, 0.85);
  }
  .info {
    font-family: PingFangSC-Regular;
    color: rgba(0, 0, 0, 0.45);
  }
}
.content-box {
  margin-top: 92px;
  padding: 0 15%;
  .notebutton {
    float: right;
    .el-button--medium {
      padding: 10px 29px;
    }
  }
}

/deep/.el-tag--medium {
  width: 100%;
}

/deep/.el-upload {
  width: 100%;
  .el-upload-dragger {
    width: 100%;
    height: 36px;
    border: 1px solid #d9d9d9;
  }
}

/deep/ label {
  font-weight: 500;
}

.uploadicon {
  margin-right: 5px;
}
</style>
